<template>
    <my-table ref="tableEle" :loading="loading" :lists="tableData" @selectionChange="tableSelect" @pageChange="handleChange" :showCheck="true" :sequence="true" :page='page' rowKey="cardId" selectKey="all">       
        <el-table-column property="cardName" label="卡片名称" align='left'></el-table-column>
        <el-table-column property="" label="卡片图片">
            <template slot-scope="scope">
                <div class="cdimgbox">
                    <img :src="scope.row.cardImg" alt="">
                </div>
            </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" property="cardDesc" label="卡片描述" align='left'></el-table-column>
        <el-table-column :show-overflow-tooltip="true" property="authorName" label="创作者" align='center'></el-table-column>
        <el-table-column :show-overflow-tooltip="true" property="valueAnalysis" label="作品价值描述" align='left' width="100px"></el-table-column>
        <el-table-column property="timestamp" label="创建时间" align='center' width="180px">
            <template slot-scope="scope">
                <span>{{scope.row.createTime}}</span>
            </template>
        </el-table-column>
    </my-table>
</template>

<script>
import {
  get_card_list
} from '@/api/collext'
import myTable from '@/components/public/myTable';
export default {
    components:{
      myTable
    },
    props:{
        selectList:{ // 初始默认选项
            type:Array,
            default:[]
        }
    },
    data(){
        return{
            page:{
                pageSize:8,
                pageIndex:1,
			    total:0,
            },
            loading:true,
            tableData:[],
            multipleSelectionIds:[],
           // tmselectList:[]
        }
    },
    created(){
        this.getCardList()
    },
    mounted() {
       // this.tmselectList = this.selectList
    },
    methods:{
        getCardList(){ 
            this.loading = true
            get_card_list({
                limit: this.page.pageSize,
                page: this.page.pageIndex,
            }).then(res=>{
                this.loading = false
                this.tableData = res.data
                this.page.total = res.total
                this.$nextTick(()=>{
                    this.setSelect()
                })
            })
        },
        tableSelect(items){
            this.$emit('change',items)
        },
        handleChange(index) {
            this.page.pageIndex = index;
            this.getCardList();
        },
        setSelect(){
            for(let i=0;i<this.tableData.length;i++){
                const row = this.tableData[i]
                const sdata = this.selectList.find(item => item.cardId == row.cardId)
                sdata && this.$refs.tableEle.setRowSelection(row)
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .cdimgbox{
        display: flex;
        align-items: center;
        justify-content: center;
        img{
            display: block;
            width: 50px;
        }
    }
</style>